<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">课程列表</block>
		</cu-custom>
		<view>
			
			<view class="fixed w-100" :style="{zIndex: 999}">
				<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="searchObj.kcname" placeholder="输入搜索的关键词" confirm-type="search"></input>
					</view>
					<view class="action">
						<button class="cu-btn bg-main  round" @tap="search">搜索</button>
					</view>
				</view>
				<view class="bg-white" :style="{height: StatusBar+'px'}">
					<search-bar @change="search"></search-bar>
				</view>
			</view>
			<view class="" :style="{paddingTop: StatusBar*2+'px'}">
				<view class="padding-sm">
					<view class="bg-white shadow radius margin-bottom-xs" v-for="(kc,index) in kcs" :key="index">
						<kc-item  :path="'/pages/cxy'"  :kc="kc"></kc-item>
					</view>
				</view>
				
			</view>
			<view v-if="kcs.length < pageInfo.total" class="padding ">
				<button @tap="loadMore" class="cu-btn block bg-main lg">显示更多</button>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from './searchBar.vue';
	export default {
		components: {
			"search-bar": searchBar
		},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				key: "",
				kcs: [],
				pageInfo: {
					current: 1,
					size: 16,
					total: 0,
				},
				searchObj: {
					kcname: "",
					jlid: "",
					mdid: "",
					aroomid: "",
					kclxid: "",
					zt: "",
					bx: "",
					sd: null,
					ed: null,
				}
			};
		},
		onShareAppMessage: function(){
			return {
				title: this.store.state.title,
				path: '/pages/first?id='+this.store.state.client.clientid
			}
		},
		onLoad: function(option){
			if (option.jlid) {
				this.searchObj.jlid = option.jlid;
			}
			if (option.mdid) {
				this.searchObj.astoreid = option.mdid;
			}
			if (option.aroomid) {
				this.searchObj.aroomid = option.aroomid;
			}
			this.search();
		},
		methods: {
			toMdSearch: function() {
				uni.navigateTo({
					url: "/pages/cxy/md/search"
				})
			},
			search: function(param) {
				this.kcs = [];
				this.pageInfo.current = 1;
				this.loadKc(param);
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadKc();
			},
			loadKc: function(param) {
				if (param) {
					this.searchObj.kclxid = param.kclxid;
					this.searchObj.zt = param.zt;
					this.searchObj.bx = param.bx;
					this.searchObj.sd = param.sd;
					this.searchObj.ed = param.ed;
				}
				this.searchObj.current = this.pageInfo.current;
				this.searchObj.size = this.pageInfo.size;
				
				this.api("/kc/page").send(this.searchObj).then(data => {
					for (let index in data.akechengs.records) {
						let record = data.akechengs.records[index];
						this.kcs.push(record);
					}
					this.pageInfo.total = data.akechengs.total;
				});
			}
		}
	}
</script>

<style>
	.kctitle {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: start;
		min-height: 100rpx;
		justify-content: space-between;
		flex-direction: column;
	}
	
	.kctitle text {
		padding: 0.3rem;
	}
</style>